<template>
  <div class="oreder" style="width: 100%; margin-top: 50px">
    <div class="w-full flex justify-between">
      <div
        class="flex bg-slate-50 w-1/5 h-52 items-center justify-center flex-col"
      >
        <div class="h-10">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-0kehutongji"></use>
          </svg>
        </div>
        <div style="text-align: center" class="h-10">Followers</div>
        <div class="text-3xl text-blue-400 h-10" style="text-align: center">
          {{ formatMoney(1252282) }}
        </div>
        <div class="text-green-400 h-10 flex" style="text-align: center">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-shangsheng"></use>
          </svg>
          <span class="text-xl"> %0.02</span>
        </div>
      </div>

      <div
        class="flex bg-slate-50 w-1/5 h-52 items-center justify-center flex-col"
      >
        <div class="h-10">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-aixin"></use>
          </svg>
        </div>
        <div class="h-10" style="text-align: center">Likes</div>
        <div class="text-pink-300 text-3xl" style="text-align: center">
          {{ formatMoney(12138) }}
        </div>
        <div class="flex" style="text-align: center">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-shangsheng"></use>
          </svg>
          <span class="text-lg text-green-300">%80.68</span>
        </div>
      </div>

      <div
        class="flex bg-slate-50 w-1/5 h-52 items-center justify-center flex-col"
      >
        <div style="text-align: center">
          <div class="h-10">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-xinxi"></use>
            </svg>
          </div>
        </div>
        <div class="h-10 align-middle" style="text-align: center">Comments</div>
        <div class="h-10 text-green-300 text-3xl" style="text-align: center">
          {{ formatMoney(26) }}
        </div>
        <div class="h-10 flex" style="text-align: center">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-shangsheng"></use>
          </svg>
          <span class="text-lg text-green-300">%100</span>
        </div>
      </div>

      <div
        class="flex bg-slate-50 w-1/5 h-52 items-center justify-center flex-col"
      >
        <div class="h-10">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-camera"></use>
          </svg>
        </div>
        <div class="h-10" style="text-align: center">Posts</div>
        <div class="h-10 text-purple-400 text-xl" style="text-align: center">
          {{ formatMoney(162) }}
        </div>
        <div class="h-10 flex" style="text-align: center">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-16xiajiang"></use>
          </svg>
          <span class="text-lg text-red-300">%100</span>
        </div>
      </div>
    </div>

    <div class="oreder-main-center flex justify-between flex-wrap mb-8">
      <div class="border-gray-400 w-2/5 mt-5 mb-5">
        <Card
          :img="img"
          imgAlt="Man looking at item at a store"
          eyebrow="Case study"
          title="Finding customers for your new business"
          pricing="Getting a new business off the ground is a lot of hard work. Here are
          five ideas you can use to find your first customers."
          url="/vacations/cancun"
        ></Card>
      </div>
      <div class="border-gray-200 w-2/5 mb-5 mt-5">
        <Card
          :img="swimmingImg"
          imgAlt="Man looking at item at a store"
          eyebrow="Case study"
          title="Finding customers for your new business"
          pricing="Getting a new business off the ground is a lot of hard work. Here are
          five ideas you can use to find your first customers."
          url="/vacations/cancun"
        ></Card>
      </div>
      <div class="border-gray-200 w-2/5">
        <ShoppingCard
          class="bg-white rounded-xl shadow-md overflow-hidden"
        ></ShoppingCard>
      </div>
      <div class="border-gray-200 w-2/5 h-96">
        <VacationVard
          class="bg-white rounded-xl shadow-md overflow-hidden"
          :img="img"
          imgAlt="Beach in Cancun"
          eyebrow="Private Villa"
          title="Relaxing All-Inclusive Resort in Cancun"
          pricing="$299 USD per night"
          url="/vacations/cancun"
        ></VacationVard>
        <!-- <VacationVard
          class="bg-white rounded-xl shadow-md overflow-hidden"
          :img="img"
          imgAlt="Beach in Cancun"
          eyebrow="Private Villa"
          title="Relaxing All-Inclusive Resort in Cancun"
          pricing="$299 USD per night"
          url="/vacations/cancun"
        ></VacationVard> -->
      </div>
    </div>

    <div>
      <video
        controls
        autoplay
        loop
        muted
        src="https://www.bilibili.com/video/BV1Rt4y1t7R6?share_source=copy_web"
      ></video>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import ShoppingCard from '../../components/ShoppCard/index.vue'
import photoImg from '../../assets/order/photo.webp'
import swimmingImg from '../../assets/order/大海.webp'
import Card from '../../components/Card/index.vue'
import VacationVard from '../../components/VacationCard/index.vue'
// 给金钱分割
const formatMoney = (money: number) => {
  return money.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
}
const img = photoImg
</script>

<style lang="scss">
.oreder {
  .icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
    font-size: 1.8rem;
    margin-right: 0.2rem;
  }
  // .oreder-main-center {
  // }
}
</style>
